import React, { useEffect, useState } from "react";
import { IndexBar, Tabs, Cell } from "react-vant";
import { useNavigate } from "react-router-dom";
type Props = {
  cityList: any;
  flag: boolean;
};

const IndexBars = (props: Props) => {
    //结构传来的参数
  const { cityList, flag } = props;
  const navigate = useNavigate();
  //获取本地存储 通过传来的值flag 判断起始站 终点站
  const [title, setTitle] = useState(
    flag ? localStorage.getItem("start") : localStorage.getItem("end")
  );
  const city = (name: any) => {
    cityList.forEach((item: any, index: any) => {
      item.citys &&
        item.citys.forEach((j: any, k: any) => {
          if (j.name === name) {
            setTitle(name);
          }
        });
    });
    if (flag) {
      localStorage.setItem("start", name);
    } else {
      localStorage.setItem("end", name);
    }
    navigate("/index/home");
  };
  return (
    <Tabs>
      <IndexBar highlightColor="red">
        {cityList &&
          cityList.map((item: any, index: string) => (
            <div key={index}>
              <IndexBar.Anchor index={item.title} />
              {item.citys &&
                item.citys.map((j: any, k: string) => {
                  return (
                    <Cell
                      className={title === j.name ? "on" : ""}
                      onClick={() => city(j.name)}
                      title={j.name}
                      key={k}
                    />
                  );
                })}
            </div>
          ))}
      </IndexBar>
    </Tabs>
  );
};

export default IndexBars;
